<template>
  <div>
    <v-tree ref='tree' :data='treeData' :multiple='true'  :halfcheck='true'/>
    <input type="text" v-model="searchword" />
    <button type="button" @click="search">GO</button>
  </div>
</template>
<script>
  import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree
  import VTree from 'vue-tree-halower'

  export default {
    components:{VTree},
    data(){
      return {
        searchword: '',
        treeData: [{
          title: 'node1',
          expanded: true,
          children: [{
            title: 'node 1-1',
            expanded: true,
            children: [{
              title: 'node 1-1-1'
            }, {
              title: 'node 1-1-2'
            }, {
              title: 'node 1-1-3'
            }]
          }, {
            title: 'node 1-2',
            children: [{
              title: "<span style='color: red'>node 1-2-1</span>"
            }, {
              title: "<span style='color: red'>node 1-2-2</span>"
            }]
          }]
        }]
      }
    },
    methods: {
      tpl (node, ctx) {
        let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
        if (node.searched) titleClass += ' node-searched'
        return `<span>
        <button style='color:blue; background-color:pink' onClick={() => this.$refs.tree.addNode(node, {title: 'sync loading'})}>+</button>
        <span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
          ctx.parent.nodeSelected(ctx.props.node)
          console.log(ctx.parent.getSelectedNodes())
        }}></span>
        <button style='color:green; background-color:pink' onClick={() => this.asyncLoad(node)}>async loading</button>
        <button style='color:red; background-color:pink' onClick={() => this.$refs.tree.delNode(node.parent, node)}>delete</button>
        </span>`
      },
      async asyncLoad (node) {
        // method1:
        this.$refs.tree.addNodes(node, await this.$api.demo.getChild())
        // method2:
        // this.$set(node, 'loading', true)
        // let data = await this.$api.demo.getChild()
        // this.$set(node, 'children', data)
        // this.$set(node, 'loading', false)
        // method3: use concat
      },
      search () {
        this.$refs.tree.searchNodes(this.searchword)
      }
    }
  }
</script>
